<template>
  <section>
    <div class="content-title">{{ title }}</div>
    <div class="filebag" v-if="filebags">
      <div class="filebag-l">
        <div v-for="(x, y) in filebags" @click="selectFileBag(y)" :class="filebagIdx == y?'active':''">{{ x.name }}</div>
      </div>
      <div class="filebag-r" v-if="filebags.length > 0">
        <div v-for="(x, y) in filebags[filebagIdx].children">{{ x }}</div>
      </div>
    </div>
  </section>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router'
import { defalutSetStore } from '@/stores/index'
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const router = useRouter()
const { proxy } = getCurrentInstance()
const userName = 'Administrator'
const path = `C:/Users/${userName}/Desktop`
const filebags = ref([])
const filebagIdx = ref(0)
function getfiles() {
  let arr = []
  proxy.$system.readDir(path).then(res => {
    const fileTypeCounts = countFileTypes(res);
    for (let i in fileTypeCounts) {
      arr.push({
        name: i,
        length: fileTypeCounts[i],
        children: []
      })
    }
    res.map(x => {
      for (let i in fileTypeCounts) {
        if (x.includes(i)) {
          arr.filter(a => a.name == i)[0].children.push(x)
        }
      }
    })
    filebags.value = arr
    console.log(fileTypeCounts, arr); // 输出每种类型的文件数量
  })
}

function countFileTypes(files) {
  const fileTypeCounts = {};

  files.forEach(file => {
    if (file.includes('.')) {
      const extension = file.split('.').pop().toLowerCase(); // 获取扩展名并转为小写
      if (extension) { // 确保文件名包含扩展名
        if (fileTypeCounts[extension]) {
          fileTypeCounts[extension]++; // 如果已存在，增加计数
        } else {
          fileTypeCounts[extension] = 1; // 否则，初始化计数为1
        }
      }
    }
  });

  return fileTypeCounts;
}
const str1 = computed(() => {
  return ''
})
const str2 = ref('')
const state = reactive({})
const useDefalutSetStore = defalutSetStore()
onMounted(() => {
  getfiles()
})
const emit = defineEmits('select')
function selectFileBag(y) {
  filebagIdx.value = y
}
</script>
<style scoped lang="scss">
.filebag {
  display: flex;

  .filebag-l {
    width: 60px;
    cursor: pointer;
    .active{
      color: red;
    }
  }

  .filebag-r {
    width: calc(100% - 60px);
    display: flex;
    flex-wrap: wrap;

    >div {
      width: calc(50% - 40px);
      padding: 10px;
      word-break: break-all;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>
